<template>
  <div class="app-container">
    <!-- 全局加载动画 -->
    <Loading :visible="visible"></Loading>

    <!-- 一级路由出口 -->
    <router-view></router-view>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, inject } from 'vue'
import Loading from './components/Loading.vue'
import { notification } from 'ant-design-vue'
import { useRouter } from 'vue-router'

const socket = inject('socket')
const router = useRouter()

const visible = ref(true)
const delay = Math.floor(Math.random() * 3 + 1) * 1000
let loading = setTimeout(() => {
  visible.value = false
}, delay)

onMounted(() => {
  socket.on('friendship offline notification', (message) => {
    notification.info({
      key: 'friendship offline notification',
      message: '好友提醒',
      description: message
    });
  })

  // 视频通话：监听视频通话邀请
  socket.on('video-call-receiver', (data) => {
    router.push({
      path: '/videoCall',
      query: {
        tid: data.uid,
        nickname: data.nickname,
        avatar: data.avatar,
        direction: data.direction
      }
    })
  })
})

onUnmounted(() => {
  clearTimeout(loading)
})
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 16px;
  font-weight: normal;
  font-family: "Times New Roman";
}

::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: #a99e9e;
}

:where(.css-dev-only-do-not-override-1p3hq3p).ant-tree .ant-tree-list-holder-inner {
  background-color: #F7F7F7;
}

:where(.css-dev-only-do-not-override-1p3hq3p).ant-drawer .ant-drawer-body {
  padding: 0;
}
</style>